<template>
  <template v-for="item in menus" :key="item.name">
    <el-sub-menu v-if="Array.isArray(item.children) && item.children.length > 0" :index="(item.name as string)">
      <template #label>
        <div class="flex align-center flex-1">
          <component :is="item.meta.icon!" size="14"></component>
          <span>{{ item.meta.title }}</span>
        </div>
      </template>
      <menu-list :menus="item.children"></menu-list>
    </el-sub-menu>
    <el-menu-item v-else :index="(item.name as string)">
      <div class="flex align-center flex-1">
        <component :is="item.meta.icon!" size="14"></component>
        <span>{{ item.meta.title }}</span>
        <span class="extra" v-if="item.meta.dot">
          <dot :color="(item.meta.dotColor as string)" />
        </span>
      </div>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
import { computed, watch, ref, nextTick, PropType } from 'vue';

import { useRoute, RouteRecordRaw } from 'vue-router';
import dot from '@/components/dots/main.vue';

defineOptions({
  name: 'menuList'
});

defineProps({
  menus: Array as PropType<RouteRecordRaw[]>
});

const route = useRoute();
const showIcon = ref(true);

const current = computed(() => {
  return {
    has: route.matched.map((v) => v.name),
    name: route.name
  };
});

watch(
  () => current.value.name,
  () => {
    showIcon.value = false;
    nextTick(() => {
      showIcon.value = true;
    });
  }
);
</script>

<style scoped lang="scss">
.i-icon {
  display: flex;
  margin-right: 4px;
}

.extra {
  margin-left: auto;
}
</style>
